<script setup lang="ts">

import {ref, watch, onMounted} from "vue";
import {FriendService, UserApplyDto, UserQueryCriteria, UserService, UserVo} from "/@/api/openapi";
import {ElMessage} from "element-plus";
import {useUserStore} from "/@/store";
import {useUserFriendStore} from "/@/store";
import {storeToRefs} from "pinia";


const tableRef = ref()
const searchParams = ref<UserQueryCriteria>({
    pageNum: 1,
    pageSize: 10
});
const total = ref(0);
const store = useUserStore();
const userFriendStore = useUserFriendStore();
const {allUser} = storeToRefs(userFriendStore);
const userApplyDto = ref<UserApplyDto>({
    applyInfo: "",
    toUid: 0
})
const centerDialogVisible = ref<boolean>(false)

const handleCurrentChange = (val: number) => {
    searchParams.value.pageNum = val
    userFriendStore.updateAllUser(searchParams.value)
}

onMounted(()=>{
    if(store.isSign){
        loadData();
    }
})

const loadData = () => {
    userFriendStore.updateAllUser(searchParams.value)
}
const apply = () => {
    FriendService.addUserApply(userApplyDto.value).then((res) => {
        console.log(res)
        ElMessage({
            type: "success",
            message: res.data
        })

    }, (error) => {
        ElMessage({
            type: "error",
            message: error
        })
    })
    centerDialogVisible.value = false
}
const edit = (data: any) => {
    userApplyDto.value.toUid = data.id
    centerDialogVisible.value = true
}
</script>

<template>
    <div>
        <el-button @click="loadData" class="flesh">刷新</el-button>
        <el-table :ref="tableRef" :data="allUser.records" style="width: 100%">
            <el-table-column prop="username" label="用户名称" width="180"/>
            <el-table-column prop="signature" label="签名" width="180"/>
            <el-table-column prop="email" label="邮箱"/>
            <el-table-column prop="phone" label="电话"/>
            <el-table-column fixed="right" label="Operations" width="120">
                <template #default="scope">
                    <el-button link type="primary" size="small" @click.prevent="edit(scope.row)">申请好友</el-button>
                </template>
            </el-table-column>
        </el-table>

        <div class="pager-wrapper">
            <el-pagination
                    background
                    layout="prev, pager, next, jumper"
                    :total="allUser.total"
                    :page-size="searchParams.pageSize"
                    :current-page="searchParams.pageNum"
                    @current-change="handleCurrentChange"
            />
        </div>

        <el-dialog
                v-model="centerDialogVisible"
                title="Warning"
                width="30%"
                align-center
        >
            <el-input v-model="userApplyDto.applyInfo" placeholder="请填写申请理由"></el-input>
            <template #footer>
      <span class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="apply">
          确认
        </el-button>
      </span>
            </template>
        </el-dialog>
    </div>
</template>

<style scoped>

</style>